<template>
  <div class="login-container">
    <div class="login-main">
      <div class="userHead"><open-data type="userAvatarUrl"></open-data></div>

      <button class="cu-btn block bg-blue margin-tb-sm lg" @click="getUserInfo">
        <text
          v-if="loading"
          class="cuIcon-loading2 cuIconfont-spin loginIcon"
        ></text>
        <text v-else class="cuIcon-weixin loginIcon"></text>
        微信用户一键登录
      </button>
      <p class="otherLogin">手机号码登录</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    }
  },
  methods: {
    getUserInfo() {
      if (this.loading) return
      let that = this
      const userInfo = {
        phone: 'xxxxxxxxx',
        password: 'xxxxxxxx',
      }
      that.loading = true
      that.$store.dispatch('login', userInfo).then((token) => {
        setTimeout(() => {
          that.$api
            .getLoginStatus()
            .then((res) => {
              that.loading = false
              uni.switchTab({
                url: '/pages/index/index',
              })
            })
            .catch((error) => {
              that.loading = false
              uni.showToast({
                title: '登录失败',
                icon: 'none',
                duration: 3000,
                complete: function () {
                  setTimeout(function () {
                    uni.hideToast()
                  }, 3000)
                },
              })
            })
        }, 1000)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url()
    no-repeat;
  background-size: 100% 100%;

  .login-main {
    position: absolute;
    top: 55%;
    left: 25px;
    right: 25px;
    text-align: center;
    transform: translateY(-50%);

    .userHead {
      width: 125px;
      height: 125px;
      border-radius: 50%;
      margin-top: 15px;
      margin-bottom: 45px;
      overflow: hidden;
      position: relative;
      left: 50%;
      margin-left: -62.5px;
    }

    .loginIcon {
      margin-right: 7px;
      font-size: 20px;
    }
  }
}
</style>
